<template>
	<view class="wrap" :style="{minHeight: pageHeight + 'px'}">
		<view class="header-wrap">
			<view class="header-nav">
				<view class="nav-logo">
					<u--image src="../../static/images/logo.svg" width="63px" height="30px"></u--image>
				</view>
				<view class="nav-li">
					<u--input
					    placeholder="搜索"
						placeholderStyle="font-size: '14px';color: '#2e303399'"
						style="width: 89%;height: 22px;border-radius: 20px; border: none;background-color: #F7F8FA;"
					    v-model="searchValue"
					    @change="searchChange"
						@focus="searchFocus"
					  >
					  <template slot="prefix">
					  	<u--image src="../../static/images/search.svg" width="17px" height="18px" mode=""></u--image>
					  </template>
					 
					  </u--input>
				</view>
				<view class="nav-menus" @click="bindMore">
					<u--image src="../../static/images/menu.svg" width="16px" height="16px"></u--image>
				</view>
			</view>
			<view class="nav-menu-down">
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					发布时间
					<u--image src="../../static/images/icon-arrow.svg" width="28" height="28" style="display: inline-block;"></u--image>
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					发布时间
					<u--image src="../../static/images/icon-arrow.svg" width="28" height="28" style="display: inline-block;"></u--image>
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					发布时间
					<u--image src="../../static/images/icon-arrow.svg" width="28" height="28" style="display: inline-block;"></u--image>
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					发布时间
					<u--image src="../../static/images/icon-arrow.svg" width="28" height="28" style="display: inline-block;"></u--image>
				</view>
			</view>
		</view>
		<view class="list-content">
			<template v-for="item in 5">
				<view  style="box-sizing: border-box;width: 90%;margin: 0 auto" @click="showDetail">
					<view style="font-size: 14px;color: #2E3033;">应急管理部办公厅关于发布应急管理部重点科技计划2024年度项目申报指南的通知</view>
					<view style="font-size: 12px;color: #3A9B18;margin: 10px auto 5px auto;">2024.04.26 17:28:44</view>
					<view style="font-size: 12px;color: #3A9B18">采购人:淮南市消防救援支队</view>
				</view>
				<view style="width: 100%;height: 1px;background: #2E3033;border-radius: 0px 0px 0px 0px;opacity: 0.1;margin: 15px auto;"></view>
			</template>
		</view>
		
		<u-popup :show="showPopup"  mode="right" :closeOnClickOverlay="true" :customStyle="{width: '300px',height: (pageHeight - 60) + 'px'}" @open="openPopup" @close="closePopup">
			<view class="popContent">
				<view style="position: fixed; margin-top: 0;padding-top: 0;display: block;width: 100%;height: 40px;line-height: 40px;background-color: #fff;">
					<view style="width: 30px;align-items: center;display: inline-block"><u--image src="../../static/images/icon-back.svg" width="32" height="32" mode=""></u--image></view>
					<view style="width: 270px;text-align: center;display: inline-block;font-size: 16px;color: #2E3033;font-weight: normal;">更多</view>
				</view>
				<view ref="list" class="content-list-wrap" :class="[index == 0 ? 'firstList' : '']" v-for="(item, index) in 8">
					<view class="content-list-p">
						消防车
					</view>
					<view class="content-list-tag">
						<text class="tags activeTag">灭火类</text>
						<text class="tags">专勤类</text>
						<text class="tags">战勤保障类</text>
						<text class="tags">消防摩托车</text>
					</view>
				</view>
				<view class="btns">
					<text style="display: inline-block;width: 135px;height: 40px;line-height: 40px;border: 1px solid #EF312A;text-align: center;font-size: 14px;color: #EF312A;">取消</text>
					<text style="display: inline-block;width: 135px;height: 40px;line-height: 40px;background: #EF312A;color
					#fff;text-align: center;font-size: 14px;color: #fff;">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				moreShow: false,
				showPopup: false,
				pageHeight: 300,
				desc: 'uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。',
			}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
				

			})
		},
		computed: {
		},
		methods: {
			searchChange() {},
			showDetail() {
				uni.navigateTo({
					url: "/pages/components/classificationDetail/index"
				})
			},
			searchFocus() {
				uni.navigateTo({
					url: "/pages/components/searchClassification/index"
				})
			},
			bindMore() {
				this.showPopup = true
			},
			closePopup() {
				this.showPopup = false
			},
			openPopup() {},
			
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
$txtcolor: #2E3033;
$w100: 100%;
$h100: 100%;
.wrap{
	width: $w100;
	box-sizing: border-box;
	
	.header-wrap {
		
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		
		.nav-menu-down {display: flex;margin: 15px auto 30px auto;}
		.header-nav {
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.nav-logo {
				width: 63px;
			}
			.nav-li {
				flex: 1;
			}
			.nav-menus {
				width: 20px;
			}
		}
		.search {
			margin-top: 17px;
			margin-bottom: 15px;
		
			.search-btn {
				width: 58px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				background: #EF312A;
				border-radius: 14px 14px 14px 14px;
				color: #fff;
				font-size: 14px;

			}
		}
		.hot-wrap {
			width: 100%;
			height: 154px;
			
			background: #FFFFFF;
			box-shadow: 0px 3px 6px 1px #EEF1F3;
			border-radius: 10px 10px 10px 10px;
			box-sizing: border-box;
			padding: 14px 15px;

			box-sizing: border-box;
			
			.hot-tit {
				display: flex;
				align-items: center;
				
				.tit-l {
					flex: 1;
					text-align: left;
				}
				.tit-r {
					flex: 1;
					font-size: 12px;
					color: #1d1f2099;
					text-align: right;
					margin-left: 5px;
				}
			}
			.hot-list {
				margin-top: 15px;
				
			}
		}
		.new-list {
			width: 100%;
			display: block;
			margin-top: 30px;
			
			.new-list-tit {
				font-weight: normal;
				font-size: 16px;
				color: #EF312A;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 15px;
			}
			.new-list-tit-line {
				width: 100%;
				height: 2px;
				background: #EF312A;
				border-radius: 0px 0px 0px 0px;
			}
			.content-list {
				margin-top: 15px;;
			}
		}
	}

}

.popContent {
	width: 100%;
	height: 100%;
	padding-bottom: 55px;
	position: relative;
	overflow-y: scroll;
	
	.btns {
		position: fixed;
		width: 300px;
		height: 40px;
		bottom: 5px;
		right: 0;
		z-index: 700;
		text-align: center;
		background-color: #fff;
		
	}
	
	.content-list-wrap {
		width: 100%;
		box-sizing: border-box;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
		
		.content-list-p {
			font-weight: 550;
			font-size: 16px;
			color: #2E3033;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 0;
			margin-top: 0;
		}
		
		.content-list-tag {
			
			text-align: left;
			
		
			.tags {
				width: 81px;
				height: 32px;
				line-height: 32px;
				font-weight: normal;
				font-size: 14px;
				color: #2E3033;
				display: inline-block;
				background: rgba(46, 48, 51, 0.05);
				border-radius: 5px 5px 5px 5px;
				margin-right: 10px;
				margin-bottom: 10px;
				text-align: center;
			}
			.tags:nth-child(3n) {
				margin-right: 0;
			}
			
			.tags.activeTag {
				font-weight: normal;
				font-size: 14px;
				color: #EF312A;
				background: rgba(223,41,34,0.05);
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #EF312A;
			}
		}
	}
	
	.firstList {
		padding-top: 40px !important;
		margin-bottom: 15px !important;
	}
	
}

</style>
